<template>
    <z-action ref="action" icon="search" link label="选择模版" width="840px">
        <el-tabs v-model="defaultTab" class="demo-tabs">
            <el-tab-pane label="合同模板" name="first">
                <z-table :tabs="tabs" url="/do/select/templates" :size="10" :condition="condition" :columns="columns"
                    :actionWidth="80" :params="params">
                    <template #action$="{ row }">
                        <el-button type="primary" link @click="select(row, 1)">选择</el-button>
                    </template>
                </z-table>
            </el-tab-pane>
            <el-tab-pane label="市场模版" name="second">
                <z-table :tabs="tabs" url="/do/select/mar_template" :size="10" :condition="condition" :columns="columns"
                    :actionWidth="80">
                    <template #action$="{ row }">
                        <el-button type="primary" link @click="select(row, 2)">选择</el-button> </template>
                </z-table>
            </el-tab-pane>
        </el-tabs>
    </z-action>
    <div v-if="result.type" :style="{ 'margin-left': '5px', 'color': 'red' }">
        {{ result.type == 1 ? '合同模版类型' : '市场模版类型' }}
        {{ result.title }}
    </div>
</template>

<script>
export default {
    provide() {
        return {
            configs: {},
        }
    },
    data() {
        return {
            result: {},
            condition: ['title'],
            columns: [
                { label: '模板名称', name: 'title' },
                { label: '创建人', name: 'creator', type: 'user' },
                { label: '创建时间', name: 'createGmt', type: 'date' },
                { label: "更新时间", name: "updateGmt", type: "date" }
            ],
            defaultTab: 'first'
        };
    },
    methods: {
        select(template, type) {
            this.result = template
            this.result.type = type
            this.$emit('update:modelValue', this.result)
            this.$refs['action'].close();
        },
    },
}
</script>
<style lang="scss">
.selected {
    margin-left: 5px;
}
</style>
